const createBanner = () => {
    // 添加banner
    const bannerWrapper = document.createElement('div');
    bannerWrapper.className = "banner-container";
    // banner-img
    const bannerImg = document.createElement('img');
    bannerImg.src = "./imgs/banner.webp";
    bannerImg.id = "banner-img"
    bannerWrapper.appendChild(bannerImg);
    // banner-text
    const bannerTextWrapper = document.createElement('div');
    bannerTextWrapper.className = "banner-text-container"
    const bannerText1 = document.createElement('h1');
    bannerText1.className = "banner-text"
    bannerText1.innerHTML = "Discover the world's top designers & creatives";
    bannerTextWrapper.appendChild(bannerText1);
    const bannerText2 = document.createElement('h2')
    bannerText2.className = "banner-text"
    bannerText2.innerHTML = "Dribbble is the leading destination to find & showcase creative work and home to the world's best design prefessionals."
    bannerTextWrapper.appendChild(bannerText2);
    const signUpButton = document.createElement('div');
    signUpButton.className = "banner-sign-up-button";
    signUpButton.innerHTML = "Sign Up";
    bannerTextWrapper.appendChild(signUpButton);
    bannerWrapper.appendChild(bannerTextWrapper);
    
    return bannerWrapper;
}

export default createBanner;